<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>194-element-ui可多选的级联选择器</title>
    <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script><script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script><link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css" /><script type="text/javascript" src="https://unpkg.com/el-cascader-multi@1.1.8/dist/index.js"></script>
    
    <style></style>
    <script type="module" crossorigin src="../../../../static/common/modulepreload-polyfill-3cfb730f.js"></script>
  </head>

  <body>
    <div id="app">
      <p>
        使用参考：
        <a href="https://www.npmjs.com/package/el-cascader-multi" target="_blank">el-cascader-multi</a>
      </p>
      <el-cascader-multi
        clearable
        v-model="checkList"
        :data="productOptions"
        label-key="name"
        value-key="id"
        children-key="data"
      ></el-cascader-multi>
    </div>
    <script>
      /*
        - 注意事项
        - 数据里面的 children 必须为 array 类型，不然组件里面获取不到 length 属性，可以收到数据之前递归处理
        - 数据双向绑定的类型必须为数组，不能动态改变绑定的类型
        - 有时会报这个错`[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Array `
          说应该传字符串和数字你传了数组，其实很可能是你的数据里面 children 为空数组，因此它检测不到，建议将空的 children 属性删除
        - 级联加载器返回是 value 组成的数组，将数组直接赋值可以自动显示对应的层级
          组件内部会自动循环遍历，找到对应 value 的 label，多级也是这样，不过它是二维数组
        - 如果开启了只显示最后一项` :show-leaf-label="true"`，需要注意所有的组后一项名字不能重复，
          否则会报`[Vue warn]: <transition-group> children must be keyed: <ElTag> `，没有唯一的键
      */
      new Vue({
        el: '#app',
        data() {
          return {
            productOptions: options, // 与element级联选择器格式一致
            checkList: []
          }
        }
      })
    </script>
  </body>
</html>
